<template>
  <div class="deviceStatistics">
    <!-- 设备统计 -->
    <div id="twoPiemain" class="twoPiemain"></div>
  </div>
</template>

<script>
const echarts = require('echarts')
import { YearMonth } from '@/api/baseManage/flMaintain/index'
export default {
  name: 'deviceStatistics',
  data() {
    return {
      echarts: '',
      waterData: [],
      twoPiemain: null,
    }
  },
  methods: {
    //改变div的长和宽
    changeHeightWidth(i, x, y, height, width) {
      console.log('height, width', height, width)
      let twoPiemain = document.getElementById('twoPiemain')
      twoPiemain.style.height = height - 40 + 'px'
      twoPiemain.style.width = width - 15 + 'px'
      this.echarts = this.$echarts.init(twoPiemain)
      this.echarts.resize()
      // this.createEcharts()
      //this.AlwaysCopyData()
    },
    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(document.getElementById('twoPiemain'))
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top: '10%',
          itemWidth: 25,
          type: 'scroll',
          data: [
            '机械水表',
            'NB远传水表',
            '集中器远传表',
            '拍照水表',
            '抄表机水表',
            '智能卡水表',
            '抄表机器人水表',
          ],
        },
        series: [
          {
            name: '设备统计',
            type: 'pie',
            radius: '80%',
            label: {
              normal: {
                show: false,
                position: 'center',
              },
            },
            // center: ['10%', '50%'],
            data: [],
            labelLine: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      this.echarts.setOption(option)
      window.addEventListener('resize', () => {
        this.echarts.resize()
      })
      // this.echarts.resize()
    },
    // 获取饼状图水量
    async AlwaysCopyData(call) {
      const res = await YearMonth()
      console.log(res.data, 'qingqiu ')
      const values = res.data
      let resData = []
      resData[0] = { value: values[0], name: '机械水表' }
      resData[1] = { value: values[1], name: 'NB远传水表' }
      resData[2] = { value: values[2], name: '集中器远传表' }
      resData[3] = { value: values[3], name: '拍照水表' }
      resData[4] = { value: values[4], name: '抄表机水表' }
      resData[5] = { value: values[5], name: '智能卡水表' }
      resData[6] = { value: values[6], name: '抄表机器人水表' }
      console.log(resData, '参数对么')

      // this.echarts.setOption({})
      this.echarts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: '60%',
          top: 'center',
          /* itemWidth: 25,
          itemGap: 15, */
          data: [
            '机械水表',
            'NB远传水表',
            '集中器远传表',
            '拍照水表',
            '抄表机水表',
            '智能卡水表',
            '抄表机器人水表',
          ],
        },
        series: [
          {
            name: '设备统计',
            type: 'pie',
            radius: '70%',
            center: ['30%', '50%'],
            data: resData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
      call && call()
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.echarts.resize()
    })
  },
  mounted() {
    this.createEcharts()
    this.AlwaysCopyData(() => {
      let width =
        document.querySelector('.deviceStatistics').parentNode.parentNode
          .parentNode.style.width
      let height =
        document.querySelector('.deviceStatistics').parentNode.parentNode
          .parentNode.clientHeight
      console.info(
        'width--设备管理',
        width.split('p')[0],
        'height--设备管理',
        height
      )
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
      this.changeHeightWidth(0, 0, 0, height, Number(width.split('p')[0]))
    })
  },
}
</script>

<style lang="scss" scoped>
.twoPiemain {
  width: 320px;
  height: 220px;
}
</style>
